<script setup>
import Header from "@/Navigation/Header.vue";
import DynamicMenu from "@/component/DynamicMenu.vue";
</script>

<template>
  <Header></Header>
  <div class="box">
    <div class="left">
      <DynamicMenu></DynamicMenu>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<style scoped>
/* 使用 flex 布局来确保子元素的排列 */
.box {
  display: flex;
  height: 100vh; /* 确保容器的高度填充整个视口 */
}

/* 左侧菜单区域 */
.box .left {
  width: 240px;
  background-color: #f5f5f5; /* 设置背景色（可选） */
  height: 100vh; /* 确保左侧区域的高度填充整个视口 */
  padding: 0;
  margin: 0;
}

/* 右侧内容区域 */
.box .right {
  flex: 1; /* 让右侧区域自动占据剩余的空间 */
  padding: 0;
  margin: 0;
  height: 100vh; /* 确保右侧区域的高度填充整个视口 */
}

/* 全局样式：确保所有元素没有外边距和内边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 如果需要对 router-view 内的内容做一些样式处理 */
.router-view {
  height: 100%;
  overflow: auto; /* 允许内容滚动（如果有多余内容） */
}
</style>
